// 根据本地localStorage 动态生成页面
setPage();

// 点击事件
$('.containerCart').click(function (e) {
  const arr = JSON.parse(localStorage.cart);

  if (e.target.getAttribute('name') === 'all') {
    arr.forEach(item => {
      item.buy = e.target.checked;
    })
  } else if (e.target.getAttribute('name') === 'other') {
    for (let i = 0; i <= arr.length - 1; i++) {
      if (arr[i].goods_id === e.target.getAttribute('goods_id')) {
        arr[i].buy = e.target.checked;
        break;
      }
    }
  } else if (e.target.getAttribute('name') === '-') {
    for (let i = 0; i <= arr.length - 1; i++) {
      if (arr[i].goods_id === e.target.getAttribute('goods_id')) {
        arr[i].num--;
        break;
      }
    }

  } else if (e.target.getAttribute('name') === '+') {
    for (let i = 0; i <= arr.length - 1; i++) {
      if (arr[i].goods_id === e.target.getAttribute('goods_id')) {
        arr[i].num++;
        break;
      }
    }

  } else if (e.target.getAttribute('name') === 'del') {
    for (let i = 0; i <= arr.length - 1; i++) {
      if (arr[i].goods_id === e.target.getAttribute('goods_id')) {
        arr.splice(i, 1);
        break;
      }

    }

  }


  localStorage.cart = JSON.stringify(arr);
  setPage();
})




function setPage() {
  // 没有创建购物车
  if (localStorage.cart === undefined) {
    $('.containerCart').html('<ul class="ul1"><li>您还没有购买商品<br><a href="./index.html">继续逛</a></li></ul>')

    // 已经创建购物车
  } else {
    const arr = JSON.parse(localStorage.cart);

    // 如果是空车
    if (arr.length === 0) {
      $('.containerCart').html('<ul class="ul2"><li>您的购物车已被清空<br><a href="./index.html">继续逛</a></li></ul>')

      // 不是空车 动态渲染生成页面
    } else {
      let bool = true;
      let type = 0;
      let number = 0;
      let money = 0;

      // 第一部分
      let str = `
          <div class="shop">
            <h4 name="type"></h4>
            <h4 name="number"></h4>
            <h4 name="money"></h4>
            <button>下单</button>
          </div>

          <div class="panel panel-info ">
            <div class="panel-body bg-info">
              <div class="checkbox">
                <label>
                  <input name="all" type="checkbox" value="">
                  全选
                </label>
              </div>
            </div>
            <div class="panel-footer">
          <ul class="cart-list">

          `;

      // 第二部分 动态渲染生成页面
      arr.forEach(function (item) {
        if (item.buy) {
          type++;//购买种类+1
          number += item.num;//购买的数量
          money += item.num * item.goods_price;
        } else {
          bool = false;
        }

        str += `
            <li class="cart-item">
              <div class="left">
                <input name="other" goods_id=${item.goods_id} type="checkbox" ${item.buy ? 'checked' : ''}>
              </div>
              <div class="right">
                <div class="media">
                  <div class="media-left">
                    <a href="#">
                      <img class="media-object"
                        src="${item.goods_small_logo}"
                        alt="...">
                    </a>
                  </div>
                  <div class="media-body">
                    <h4 class="media-heading">${item.goods_name}</h4>
                    <p>
                      <i class="glyphicon glyphicon-yen"></i>
                      <span>${item.goods_price}</span>
                    </p>
                    <div class="btn-group pull-right" role="group" aria-label="...">
                      <button name="-" goods_id="${item.goods_id}" ${item.num === 1 ? 'disabled' : ''} type="button" class="btn btn-default">-</button>
                      <button type="button" class="btn btn-default" disabled>${item.num}</button>
                      <button name="+" goods_id="${item.goods_id}" ${item.num === item.goods_number - 0 ? 'disabled' : ''} type="button" class="btn btn-default">+</button>
                    </div>
                    <button name="del" goods_id="${item.goods_id}" class="del btn btn-danger">我不要了</button>

                  </div>
                </div>
              </div>
            </li>

            `;

      })

      // 第三部分
      str += `
              </ul>
            </div>
          </div>
          `;

      //写入标签中
      $('.containerCart').html(str);

      $('[name="all"]').prop('checked', bool);

      $('[name="type"]').html(`已选(${type})种商品`);
      $('[name="number" ]').html(`已选${number}件商品`);
      $('[name="money" ]').html(`应付总额<span>￥${money.toFixed(2)}</span> 元`);

      $('[name="number0" ]').html(number);

    }
  }

}
